<template>
	<div>
		<div style='width:100%;height:500px'>
			<graph-view :xmlData='xmlData' :stateData='stateData' @leftClick='leftClick' @rightClick='rightClick' @dblClick='dblClick' ref='mxgraphRefs' @loadGetNodes='loadGetNodes'></graph-view>
		</div>

	</div>
</template>
<script>
	export default {
		data() {
			return {
				xmlData: '<mxfile host="Electron" modified="2022-04-20T06:38:55.360Z" agent="5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/16.5.1 Chrome/96.0.4664.110 Electron/16.0.7 Safari/537.36" etag="JS2JDhVRfgun12LWVq20" version="16.5.1" type="device"><diagram id="URc8-sm22-PpEhmGzUGA" name="Page-1">5VldU6MwFP01POoQvoqPtlZ3Z3ZnnfFhV99iSSEaCIZg6f76DSVA0lLEtmpdpzOd5CQX0px7Ti7FsCdxccVgGv2kASKGZQaFYV8YljXyLfFdAssKcG1QASHDQQUpwA3+iyRoSjTHAcq0iZxSwnGqgzOaJGjGNQwyRhf6tDkl+l1TGKIN4GYGySb6Gwc8qlDfGrX4N4TDqL4z8M6qkRjWk+UvySIY0IUC2VPDnjBKedWKiwki5d7V+1LFXW4ZbRbGUMI7Auj9Q7kflkngvaBkNaEKQU85Tr/XlzmRaH1dC995y/Gvy7sxfJqnJroeL7IT0Ky3WUfGl/UeoUBsmexSxiMa0gSSaYuOGc2TAJV3MEWvnfOD0lSAQIAPiPOl5B/mnAoo4jGRo6jA/I8ML9u3ZfvUlb2LQhm6WNadhLPlKujUAaMauFVH28BVT4u8RgzHiCMmwewR8Vkk15NxRh/RhBLKVntgm6bnub4YmdOEK7g7KT8Cl3sfbKRby5+EMpqzGephQzLGIQsR75nnKaxdISp+DFuKOIYI5PhZXweUOgmbeW0qiYakve7K5NqeaFPfOJ8a46kxdY1zx/BHXak3IPGs3sTT02oRYY5uUrjau4VwIz2FNP7mmBCFJQtMzHN3D16fEeOo6Gd2kwkZYDvSIqRH+rK7aA0H1C4SKWbjmftyt+Eq3eqvHew1kp/l7LmhpiVqg4k9zADsZAaaEVRRPVawjfaeRNmSWgc0AGegAZy9jQHsrHh7gOKdL6F4oCu+kfKxSN7dQfGHO+QbLd8qI6/T9eglYR/Pce4NVLPTnVIfpuYhhaNagvy3avZ0MYNjO79HxyNmc5iYwangTRe087lrdn+gyK3uTPswkTsDRO5/CZGvFenNPxTHonKwy5l9tFV6W5g3NcBnq9LPBkoeHNvB7g7QvPpo0aH5iMb3efay3nVz0NV/YE73Un+jbKl+p0P9fof4/fcS/y5n/DuI/zWn/+EI39VGDih+MPQZ3e/Ou8Hil6HXFCdcOa1Ga6fVeiJW65JRa7nYLOOgruINcBXQ//SfRTAtm4IQSAgiNGQwFrylStmnjSn14EtONMcFqt8/fCZnWq9L7Pd7+hDd9vVFlTntOyB7+g8=</diagram></mxfile>',
				stateData: [{
					equipId: '1',
					color: 'red',
					isWarning: true,
					effectType: 'fade',
				}]
			};
		},
		mounted() {
			let colors = ['red', 'green', 'blue', 'black','pink','yellow']
			let flag = 1
			setInterval(() => {
				flag = flag > 6 ? 1 : flag + 1
				this.stateData = [{
					equipId: String(flag),
					color: colors[flag - 1],
					isWarning: true,
					effectType: 'fade',
				}]
			}, 3000);
		},
		methods: {
			leftClick(e) {
				console.log(e, '左键点击')
			},
			rightClick(e) {
				console.log(e, '右键点击')
			},
			dblClick(e, cell) {
				console.log(e, cell, '双击')
			},
			loadGetNodes(nodes) {
				console.log(nodes)
			}
		}
	};

</script>
